<template>
  <div class="health">
    <breadcrumb title="健康填报" homePath="/student" />
    <!-- 填写表单 -->
    <!-- 基础信息 -->
    <el-card>
      <h1>基础信息</h1>
      <el-table
        :data="studentData"
        style="width: 100%; margin-bottom: 25px"
        border
      >
        <template slot="empty">
          <p>{{ baseInfoText }}</p>
        </template>

        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="classes" label="班级" />
        <el-table-column prop="address" label="生源地" />
      </el-table>
      <el-card v-if="isShow">
        <h1>健康信息上报</h1>
        <!-- 填报信息 -->
        <el-form label-position="right" label-width="140px" :model="healthForm">
          <el-form-item label="当前体温">
            <el-input
              style="width: 100px"
              v-model.number="healthForm.temperature"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否发烧、发热">
            <el-radio v-model="healthForm.fever" label="是">是</el-radio>
            <el-radio v-model="healthForm.fever" label="否">否</el-radio>
          </el-form-item>
          <el-form-item label="是否途径高危风险区">
            <el-radio v-model="healthForm.godanger" label="是">是</el-radio>
            <el-radio v-model="healthForm.godanger" label="否">否</el-radio>
          </el-form-item>
          <el-form-item label="是否在校">
            <el-radio v-model="healthForm.leaveout" label="否">是</el-radio>
            <el-radio v-model="healthForm.leaveout" label="是">否</el-radio>
          </el-form-item>
          <el-form-item label="是否已接种新冠疫苗">
            <el-radio v-model="healthForm.hesuan" label="是">是</el-radio>
            <el-radio v-model="healthForm.hesuan" label="否">否</el-radio>
          </el-form-item>
          <el-form-item label="口罩是否充足">
            <el-radio v-model="healthForm.mask" label="是">是</el-radio>
            <el-radio v-model="healthForm.mask" label="否">否</el-radio>
          </el-form-item>
          <el-form-item label="灭菌用品是否充足">
            <el-radio v-model="healthForm.kills" label="是">是</el-radio>
            <el-radio v-model="healthForm.kills" label="否">否</el-radio>
          </el-form-item>
        </el-form>
        <!-- 提交按钮 -->
        <el-button type="primary" @click="submitHealth"
          >提交<i class="el-icon-upload el-icon--right"></i
        ></el-button>
        <!-- 提示图片区域 -->
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimagepphcloud.thepaper.cn%2Fpph%2Fimage%2F115%2F608%2F757.jpg&refer=http%3A%2F%2Fimagepphcloud.thepaper.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636985079&t=da5fe5a8cf8bd9fd7606893f45d68907"
          alt="高风险地区"
        />
        <img
          class="tag"
          src="https://img1.baidu.com/it/u=2491492157,445283593&fm=15&fmt=auto"
          alt=""
        />
      </el-card>
      <!-- 显示表单 -->
      <h1 v-if="!isShow">我的健康申报表</h1>
      <el-card v-if="!isShow">
        <el-table :data="todayHealthData" style="width: 100%" border>
          <template slot="empty">
            <p>{{ baseInfoText }}</p>
          </template>
          <el-table-column prop="temperature" label="当前体温(℃)" />
          <el-table-column prop="fever" label="是否发烧发热" />
          <el-table-column prop="godanger" label="是否去过高危地区" />
          <el-table-column prop="leaveout" label="是否离开学校" />
          <el-table-column prop="hesuan" label="是否接种疫苗" />
          <el-table-column prop="mask" label="口罩是否充足" />
          <el-table-column prop="kills" label="杀毒用品是否充足" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";

import { getUserDataByToken } from "network/users/getUserDataByToken";
import { setHeath } from "network/student/setHeath";
import { getHealthNowDayByid } from "network/student/getHealthNowDayByid";
export default {
  name: "Notice",
  data() {
    return {
      healthForm: {
        token: window.sessionStorage.getItem("token"),
        temperature: undefined,
        godanger: "否",
        fever: "否",
        leaveout: "否",
        hesuan: "是",
        mask: "是",
        kills: "是",
      },
      baseInfoText: "",
      studentData: [],
      todayHealthData: [],
      isShow: false,
    };
  },
  components: {
    Breadcrumb,
  },
  async created() {
    this.$store.commit("setCurrentIndex", {
      type: "studentCurrentIndex",
      index: 1,
    });

    let res = await getUserDataByToken(window.sessionStorage.getItem("token"));
    this.studentData.push(res);

    this.getHealthNowDayByid();
  },
  methods: {
    // 获取用户本日的健康申报表
    async getHealthNowDayByid() {
      let res = await getHealthNowDayByid({ token: this.healthForm.token });
      console.log(res);
      if (!res[0]) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }

      this.todayHealthData.length = 0;
      this.todayHealthData.push(res[0]);
    },
    // 提交健康申报表
    async submitHealth() {
      if (this.healthForm.temperature == undefined) {
        return this.$message.error("请填写体温！！！");
      }
      if (
        this.healthForm.temperature >= 43 ||
        this.healthForm.temperature <= 35
      ) {
        return this.$message.error("请填写有效的体温！！！");
      }

      let res = await setHeath(this.healthForm);
      this.getHealthNowDayByid();
      this.$message.success(res);
    },
  },
};
</script>

<style lang="less" scoped>
.health {
  .el-card {
    position: relative;
    padding: 5px 20px 20px;
    h1 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      margin-bottom: 10px;
      text-align: center;
    }
    .el-form {
      .el-form-item {
        margin-left: 50px;
      }
    }
    .el-button {
      margin-left: 150px;
    }
    img {
      position: absolute;
      width: 300px;
      height: 400px;
      left: 400px;
      top: 120px;
      border-radius: 10px;
    }
    img.tag {
      left: 800px;
    }
  }
}
</style>